<template>
  <div>
    <el-select
      id="select"
      ref="selectTable"
      v-model="selectShowValue"
      :placeholder="placeholder"
      clearable
    >
      <template #empty>
        <div class="vxe-table--ignore-clear" style="padding:10px;">
            <el-input
                v-model="searchQuery"
                placeholder="请输入"
            >
            </el-input>
            <vxe-table
            height="250"
            ref="table"
            :data="tableDataFilter"
            :highlight-current-row="isHighlight"
            :border="border"
            @cellClick="handleCurrentChange"
            style="width: 100%;"
            :scroll-y="{ enabled: true, gt: 60 }"
            >
                <vxe-column
                    v-for="(field,i) in fields"
                    :prop="field.prop"
                    :title="field.label"
                    :width="field.width"
                    :show-overflow-tooltip="field.showTooltip"
                    :key="i"
                >
                    <template #default="{ row }">
                        <span v-html="highlightText(row[field.prop])"></span>
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
      </template>
    </el-select>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
const props = defineProps({
    placeholder:{
        type:String,
        default:'请选择'
    },
    isHighlight:{
        type:Boolean,
        default:true
    },
    border:{
        type:Boolean,
        default:false
    },
    editable:{
        type:Boolean,
        default:false
    },
    value:{
        default:undefined
    },
    label:{
        default:undefined
    },
    tableData:{
        type:Array,
        default:[]
    },
    fields:{
        type:Array,
        default:[]
    }
})
const searchQuery = ref('')
const emits = defineEmits(['update']);
const selectTable = ref();
const table = ref();
const selectShowValue = ref(null);
const rowObj = ref(null);
const data = computed({
  get() {
    return props.data;
  },
  set(val) {
    emits("update", val);
  },
});
const highlightText = (text) => {
  if(text){
    if(typeof text !== 'string'){
      text = JSON.stringify(text)
    }
    if(!searchQuery.value){
        return text
    }
    const regex = new RegExp(`(${searchQuery.value})`, 'gi');
    return text.replace(regex, '<span class="highlight" style="background-color:yellow; font-weight: bold;">$&</span>');
  }else{
    return ''
  }
};
const tableDataFilter = computed(()=>{
    return props.tableData.filter((row) => {
        return Object.values(row).some((value) => {
            return String(value).toLowerCase().includes(searchQuery.value.toLowerCase());
        });
    });
})
watch(data, (newVal) => {
  if (newVal) {
    if (typeof props.label !== "undefined") {
      if (typeof props.value !== "undefined") {
        let row = props.tableData.find(
          (item) => item[props.value] === props.data
        );
        selectShowValue.value =
          typeof row === "undefined" ? props.data : row[props.label];
      } else if (typeof props.objKey !== "undefined") {
        let row = props.tableData.find(
          (item) => item[props.objKey] === props.data[props.objKey]
        );
        selectShowValue.value =
          typeof row === "undefined" ? props.data : row[props.label];
      }
    } else {
      if (typeof props.value !== "undefined") {
        let row = props.tableData.find(
          (item) => item[props.value] === props.data
        );
        selectShowValue.value =
          typeof row === "undefined" ? props.data : row[props.value];
      } else if (typeof props.objKey !== "undefined") {
        let row = props.tableData.find(
          (item) => item[props.objKey] === props.data
        );
        selectShowValue.value =
          typeof row === "undefined" ? props.data : row[props.objKey];
      }
    }
  }
});
watch(selectShowValue, (newVal) => {
  if (newVal === "") {
    emits("update", newVal);
    table.value.setCurrentRow(null);
  }
});
const handleCurrentChange = (vals) => {
  console.log(vals.row);
  let val = vals.row
  if (!val) {
    return;
  }
  rowObj.value = { ...val };
  setLabel(val);
  // if (typeof props.value !== "undefined") {
  //   emits("update", val[props.value]);
  // } else {
  //   emits("update", val);
  // }
  emits("update", val);
  selectTable.value.blur();
};
const setLabel = (val) => {
  if (typeof props.label === "undefined") {
    if (typeof props.value !== "undefined") {
      selectShowValue.value = val[props.value];
    } else if (typeof props.objKey !== "undefined") {
      selectShowValue.value = val[props.objKey];
    }
  } else {
    selectShowValue.value = val[props.label];
  }
};
</script>
<style>
.highlight {
  background-color: yellow;
}
</style>
